<template>
	<view class="addCompany_wrapper">
		<view class="addcompany_form">
			<up-form :model="model1" labelPosition="top" :rules="rules" ref="uFormRef">
				<up-form-item label="股东:" prop="targetCompany" ref="Name" labelWidth="auto">
					<up-input v-model="model1.targetCompany" border="none" placeholder="请输入"></up-input>
					<template #right>
						<up-icon name="arrow-right"></up-icon>
					</template>
				</up-form-item>
				<up-form-item label="持股比例:" prop="rate" ref="percent" labelWidth="auto">
					<up-input v-model="model1.rate" border="none" placeholder="请输入"></up-input>
					<template #right>
						<up-icon name="arrow-right"></up-icon>
					</template>
				</up-form-item>
			</up-form>
		</view>
		<view class="apply-btn-wrapper s-flex-r-s-c">
			<view class="del-btn s-flex-c-c-c" v-if="model1.index!==undefined" @click="del">
				<text>删除</text>
			</view>
			<view class="apply-btn" @click="handleSave">
				<text>保存{{model1.index}}</text>
			</view>
		</view>
	</view>
</template>

<script  setup name="addArea">
	import {
		ref,
		unref,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	const uFormRef = ref(null);
	import {onLoad} from "@dcloudio/uni-app"
	const model1 = ref({
		targetCompany:''
	})
	const rules = {
		targetCompany: [{
			required: true,
			message: '请输入股东',
			trigger: ['blur', 'change'],
		}],
		rate: [{
			required: true,
			message: '请输入持股比例',
			trigger: ['blur', 'change'],
		}]
	}
	onLoad((e)=>{
		console.log('e: ', e)
		if(e.form){
			model1.value = JSON.parse(e.form)
			console.log('model1.value: ', model1.value.index)
		}
	})
	function handleSave() {
		uFormRef.value.validate().then(valid => {
			if (valid) {
				uni.$emit('address',unref(model1.value))
				uni.navigateBack()
			} else {
				uni.$u.toast('校验失败')
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});
	}
	function del() {
		uni.$emit('address',{index:model1.value.index,del:1})
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.addCompany_wrapper {

		.addcompany_form {
			padding: 10rpx 32rpx;
		}

		.apply-btn-wrapper {
			position: fixed;
			bottom: 0;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 200rpx;
			z-index: 10;
			padding: 0 30rpx;
			box-sizing: border-box;
			.del-btn{
				width: 214rpx;
				height: 96rpx;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				border: 2rpx solid #FF7139;
				font-weight: 500;
				font-size: 32rpx;
				color: #FF7139;
				line-height: 38rpx;
				margin-right: 34rpx;
			}
			.apply-btn {
				background: linear-gradient(128deg, #FF9839 0%, #FF7139 100%);
				color: #fff;
				width: 686rpx;
				margin: 0 auto;
				height: 96rpx;
				flex: 1;
				border-radius: 200rpx;

				text-align: center;
				font-size: 32rpx;

				line-height: 96rpx;
			}

			// background: rgba(0,0,0,);
		}
	}
</style>